﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title id='Description'>Solar System Status</title>
    <link rel="stylesheet" href="./Content/jqx.base.min.css" type="text/css" />
    <link rel="stylesheet" href="./Content/solar.css" type="text/css" />
    <script type="text/javascript" src="./scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="./scripts/jq.min.js"></script>
    <script type="text/javascript" src="./scripts/solar.js"></script>
</head>
<body>
    <div id="container" style="width: 1000px">
        <div id="header" style="background-color: #FFA500;">
                <a href="Configuration.htm" target="_blank" style="float: right; display:inline-block;">
                    <img src='./Content/images/settings.png' alt="Settings" title="Settings" style="border: 0;" />
                </a><a href="History.htm" target="_blank" style="float: right">
                        <img src='./Content/images/calendar_view_month.png' alt="Calendar" title="History" style="border: 0;" />
                    </a><a href="Logs.htm" target="_blank" style="float: right">
                            <img src='./Content/images/notepad.png' alt="Logs" title="Event Logs" style="border: 0;" />
                        </a>
            <h1 style="margin-bottom: 0; color: #000080; text-align: center; ">
                &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;Solar Status 
            </h1>
        </div>
        <div id="pvInput" style="background-color: #FFD700; height: 400px; width: 25%;
            float: left;">
            <fieldset>
                <legend style="color: #663300; font-size: large; text-align: center;">PV Array</legend>
                <div id="Div3" style="float: left;">
                    <div style="margin-left: 10px; float: left;" id="linearGaugePVVoltage">
                    </div>
                    <div id="pvVoltGaugeValue" class="gaugeText">
                        PV voltage here</div>
                </div>
                <div id="Div5" style="float: left;">
                    <div style="margin-left: 10px; float: left;" id="linearGaugePVCurrent">
                    </div>
                    <div id="pvCurrentGaugeValue" class="gaugeText">
                        PV Amperage here</div>
                </div>
            </fieldset>
            <fieldset id="inverter">
                <legend style="color: #663300; font-size: large; text-align: center;">Inverter</legend>
                <div id="Div10" style="float: left;">
                    <div style="margin-left: 10px; float: left;" id="linearGaugeInverterPower">
                    </div>
                    <div id="inverterPowerGaugeValue" class="gaugeText">
                        Inverter power here</div>
                </div>
                <div id="Div1" style="float: left;">
                    <div style="margin-left: 10px; float: left;" id="linearGaugeChargerPower">
                    </div>
                    <div id="chargerPowerGaugeValue" class="gaugeText">
                        Chager power here</div>
                </div>
            </fieldset>
        </div>
        <div id="content" style="background-color: #EEEEEE; height: 400px; width: 49.9%;
            float: left;">
            <div class="centerGaugeText" id="centerGaugeValue">
            </div>
            <div style="margin-left: 75; float: left;" id="gaugeContainer">
            </div>
        </div>
        <div id="Battery" style="background-color: #FFD700; height: 400px; width: 25%;
            float: left;">
            <fieldset>
                <legend style="color: #663300; font-size: large; text-align: center;">Battery bank</legend>
                <div id="Div2" style="float: left;">
                    <div style="margin-left: 10px; float: left;" id="linearGaugeBatteryVoltage">
                    </div>
                    <div id="batteryVoltGaugeValue" class="gaugeText">
                        Bat voltage here</div>
                </div>
                <div id="Div6" style="float: left;">
                    <div style="margin-left: 10px; float: left;" id="linearGaugeBatteryCurrent">
                    </div>
                    <div id="batteryCurrentGaugeValue" class="gaugeText" >
                        Bat Amperage here</div>
                </div>
            </fieldset>
            <fieldset>
                <legend style="color: #663300; font-size: large; text-align: center;">Energy</legend>
                <div id="Div4" style="float: left;">
                    <div id="energyToday" class="energyText">
                        Energy Today here</div>
                </div>
                <div style="clear:both;"></div>
                <div id="Div9" style="float: left;">
                    <div id="totalEnergy" class="energyText">
                        Total Energy here</div>
                </div>
            </fieldset>
        </div>
        <div id="footer" class="footer">
            <div id="stateText" class="footerText">
                STATE GOES HERE</div>
            <div id="controllerInfoText" class="footerInfo">
                Controller Info GOES HERE</div>
            <div id="inverterInfoText" class="footerInfo">
                Inverter Info GOES HERE</div>
        </div>
    </div>
</body>
</html>
